爬文時常看見「虛擬DOM」一詞，但還沒有梳理過，特於此筆記。

Takeaway

• 虛擬DOM其實是JS物件
• Vue也有虛擬DOM，叫作VNode
• Svelte的哲學是不需要用虛擬DOM
• 重點不是快慢，而是可以用聲明式語法
• 好處還有方便維護，以及能做到跨平台使用
• React18前，由ReactDOM.render()負責將虛擬DOM安插到真實節點
• React18後，由createRoot和hydrateRoot負責協助
• 遍歷vDOM tree的時間複雜度是O(n^3)，只比對前後差異則是O(n)
• Fiber透過linked list結構進行遍歷，足以讓虛擬DOM實現增量渲染（Incremental Rendering），可以分割、中斷或調整渲染的優先順序
• requestIdleCallback()：善用零碎時間，讓瀏覽器裡的任務不被單線程耽擱
• shouldYield()：判斷任務執行有沒有超過5毫秒
• Lanes模型：React 17時引入，關於任務執行的優先順序。相較於16的Expiration Times，可用二進制運算做到更細緻的處理
• ReactElement的$$typeof屬性是symbol類型，可用來防止XSS攻擊。而倘若瀏覽器不支援symbol類型，React會回傳0xeac7。小彩蛋是因為這串值長得像React，哈
• lazyTree可以讓IE(8-11)和Edge逐一渲染節點，在遇到特殊節點（例如Fragment）時會進行調整。其他瀏覽器則是都採取一次渲染
• React 15時是Stack Reconciler加上Renderer，16則是Fiber Reconciler加Renderer再加上 Scheduler。目前則向著Concurrent Features的方向發展中